<template>
  <div>
    <div
      class="swiper-container"
      @mouseenter="swiper.autoplay.stop()"
      @mouseleave="swiper.autoplay.start()"
      ref="swiper1"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in images" :key="img.id">
          <img :src="img.imgUrl" alt="" />
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { requestImages } from "../../../api/index";

export default {
  name: "Center",
  data() {
    return {
      images: [],
    };
  },
  async mounted() {
    // console.log(this.swiper);
    let res = await requestImages();
    this.images = res;
  },
  watch: {
    images() {
      this.$nextTick(() => {
        this.swiper = new Swiper(this.$refs.swiper1, {
          autoplay: {
            delay: 6000,
          },
          loop: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
          },
          mousewheel: true,
          keyboard: true,
        });
      });
    },
  },
};
</script>

<style scoped>
.swiper-container {
  width: 730px;
  height: 454px;
  margin-top: 5px;
  margin-left: 215px;
}
.swiper-slide {
  display: flex;
}
.swiper-slide img {
  width: 730px;
  height: 454px;
  opacity: 0.8;
}
</style>